<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/views/include/nocachehead.jsp"%>
<title>浏览照片 - <c:out value="${requestScope.photo.albumName }" /></title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/pagination.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/comment.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/ad-gallery/jquery.ad-gallery.pack.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/gallery.css" >
<style type="text/css">
  * {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
    color: #333;
    line-height: 140%;
  }
  select, input, textarea {
    font-size: 1em;
  }
  body {
    padding: 30px;
    font-size: 70%;
    width: 800px;
  }
  h2 {
    margin-top: 1.2em;
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px dotted #dedede;
  }
  h3 {
    margin-top: 1.2em;
    margin-bottom: 0;
    padding: 0;
  }
  .example {
    border: 1px solid #CCC;
    background: #f2f2f2;
    padding: 10px;
  }
  ul {
    list-style-image:url(list-style.gif);
  }
  pre {
    font-family: "Lucida Console", "Courier New", Verdana;
    border: 1px solid #CCC;
    background: #f2f2f2;
    padding: 10px;
  }
  code {
    font-family: "Lucida Console", "Courier New", Verdana;
    margin: 0;
    padding: 0;
  }

  #gallery {
    padding: 30px;
    background: #e1eef5;
  }

</style>
</head>
<body>
	<%@ include file="/views/include/statusbar.jsp"%>
	<div>
		<!-- main content start -->
		<div>
			<!-- title nav start -->
			<div>相册  
				<a href="${pageContext.request.contextPath}/wo/${requestScope.photo.ownerId}.html"><c:out value="${requestScope.photo.ownerNickname}" /></a>
				<a href="${pageContext.request.contextPath}/album/list/${requestScope.photo.ownerId}.html"><c:out value="${requestScope.photo.ownerNickname}" />的相册</a>
				<a href="${pageContext.request.contextPath}/album/view/${requestScope.photo.albumId}.html"><c:out value="${requestScope.photo.albumName }" /></a>
			</div>
			<!-- title nav end -->
			<div id="gallery" class="ad-gallery">
		      <div class="ad-image-wrapper"></div>
		      <div class="ad-controls"></div>
		      <div class="ad-nav">
		        <div class="ad-thumbs">
		          <ul class="ad-thumb-list">
		          	<c:forEach items="${requestScope.photos}" var="photoFile" varStatus="status">
		          	<li>
		              <a href="${pageContext.request.contextPath}/image/<c:out value="${photoFile.middleFile}" />.${photoFile.ext}">
		                <img src="${pageContext.request.contextPath}/image/<c:out value="${photoFile.smallFile}" />.${photoFile.ext}" class="image${status.index}">
		              </a>
		            </li>
		            <c:if test="${photoFile.id eq requestScope.photo.id}">
		            	<c:set var="photoIndex" value="${status.index}"/>
		            </c:if>
					</c:forEach>
		          </ul>
		        </div>
		      </div>
		    </div>
		    <div id="descriptions">
				<skyline:setSessionAttrToVar var="SESSION_USER" key="SESSION_USER"/>
				<c:choose>
					<c:when test="${requestScope.photo.ownerId ne pageScope.SESSION_USER.id}">
						<div class="displayingPhotoDesc">
							<p id="description">
								<c:out value="${requestScope.photo.description}" />
							</p>
						</div>
					</c:when>
					<c:otherwise>
						<div class="displayingPhotoDesc">
							<c:if test="${requestScope.photo.description ne ''}">
								<p id="description" title="点击修改描述">
									<c:out value="${requestScope.photo.description}" />
								</p>
							</c:if>
							<c:if test="${requestScope.photo.description eq ''}">
								<p id="description" title="点击添加描述">
									点击添加描述
								</p>
							</c:if>
						</div>
						<div id="info" style="display: none">
							<div class="">
								<p>
									<label>描述:</label>
									<textarea id="desc" name="description" rows="" cols=""><c:out value="${requestScope.photo.description}" /></textarea>
									<span id="description_tip"></span>
								</p>
							</div>
							<div class="">
								<button id="submitBtn" type="button" class="">修改</button>
								<button id="cancleBtn" type="button" class="">取消</button>
							</div>
						</div>
						<div>
							<c:if test="${requestScope.photo.activity ne 'UNDELETABLE'}">
								<span><a id="delUrl" href="javascript:delPhoto(${requestScope.photo.id});">删除照片</a></span>
								| <span><a id="setCoverUrl" href="javascript:setCover(${requestScope.photo.id});">设为封面</a></span> 
								| <span><a id="setPorUrl" href="javascript:setPortrait(${requestScope.photo.id});">设为头像</a></span>
								| <span><a id="editUrl" href="${pageContext.request.contextPath}/album/editphoto/${requestScope.photo.id}.html">编辑信息</a></span>
							</c:if>
						</div>
					</c:otherwise>
				</c:choose>
		    </div>
			
			<%--
			<style type="text/css">
			.galleryNav {
				width: 600px;
				height: 110px;
				overflow: auto;
				background: #c1c1c1;
			}
			
			.galleryNavImgs {
				height: 90px;
				overflow: hidden;
			}
			
			.galleryNavImgs img {
				height: 80px;
				margin: 5px;
				border: 1px solid #1f1f1f;
				float: left;
				display: inline;
			}
			</style>
			
			<div id="gallery" class="gallery">
				<font id="curPhotoIndex" class="curPhotoIndex"></font>/<font id="totalPhotoNum" class="totalPhotoNum"></font>
				<div id="displayingPhoto" class="displayingPhoto">
					<div id="displayingPhotoImg" class="displayingPhotoImg" style="width:600px;text-align:center">
						<img id="" src="${pageContext.request.contextPath}/image/${requestScope.photo.middleFile}.jpg"/>
					</div>
				</div>
				<div id="galleryNav" class="galleryNav">
					<div id="galleryNavImgs" class="galleryNavImgs">
					<c:forEach items="${requestScope.photos}" var="photoFile" varStatus="status">
						<a href='javascript:Gallery.getDisplayingPhoto(${status.index})'>
							<img id='thumb${status.index}' name='photoid${status.index}' class='thumbs' src='${pageContext.request.contextPath}/image/<c:out value="${photoFile.smallFile}" />.jpg'  />
						</a>
					</c:forEach>
					</div>
				</div>
				
			</div>
			 --%>
		</div>
		<!-- main content end -->
		<c:if test="${requestScope.photo.ownerId eq pageScope.SESSION_USER.id}">
		<script type="text/javascript">
		function delPhoto(id) {
			if(confirm("确定要删除这张照片吗？")) {
				location='${pageContext.request.contextPath}/album/delphoto/'+id+'.html';
			}
			
		}
		function setCover(id) {
			if(confirm("确定要把这张照片设为封面吗？")) {
				var postUrl='${pageContext.request.contextPath}/album/setcover/'+id+'.html';
				doAjax(postUrl,null,function(data){
					if(data.success) {
						if(data.errmsg) alert(data.errmsg);
					} else {
						if(data.errmsg) alert(data.errmsg);
						if(!data.logined) location='${pageContext.request.contextPath}/login.html'
					}
				},function(){
					alert('系统发生异常，请稍候再试...');
				});
			}
		}
		function setPortrait(id) {
			if(confirm("确定要把这张照片设为头像吗？")) {
				var postUrl='${pageContext.request.contextPath}/album/setportrait/'+id+'.html';
				doAjax(postUrl,null,function(data){
					if(data.success) {
						if(data.errmsg) alert(data.errmsg);
					} else {
						if(data.errmsg) alert(data.errmsg);
						if(!data.logined) location='${pageContext.request.contextPath}/login.html'
					}
				},function(){
					alert('系统发生异常，请稍候再试...');
				});
			}
		}
		</script>
		</c:if>
		<script type="text/javascript">
		var currentPhotoId = null;
		(function($){
			$(document).ready(function(){
				photos = [];
				<c:forEach items="${requestScope.photos}" var="photoFile" varStatus="status">
				photos.push({id:'${photoFile.id}'});
				</c:forEach>
				
				var galleries = $('.ad-gallery').adGallery({ 
					loader_image: '${pageContext.request.contextPath}/plugin/ad-gallery/loader.gif',
				    start_at_index: '${photoIndex}',
				    width: false,
				    height: false,
				    slideshow: {enable: false},
				    effect: 'fade',
				    enable_keyboard_move: true,
				    cycle: true,
				    callbacks: {afterImageVisible: loadPhotoInfo}
				});
				<c:if test="${requestScope.photo.ownerId eq pageScope.SESSION_USER.id}">
				$('#description').click(function(){
					$('#description').hide();
					$('#info').show();
				});
				$('#desc').keyup(function(){
					var desc = $('#desc').val();
					if(desc.length>200){
						$('#submitBtn').attr("disabled","disabled");
						$('#submitBtn').html('字数不能超过200');
					} else {
						$('#submitBtn').removeAttr("disabled");
						$('#submitBtn').html('修改');
					}
				}).blur(function(){
					$('#desc').keyup();
				});
				$('#submitBtn').click(function(){
					var postUrl='${pageContext.request.contextPath}/album/changephotodesc/'+photos[galleries[0].current_index].id+'.html';
					var desc = $('#desc').val();
					var data = 'description='+desc;
					doAjax(postUrl,data,function(data){
						if(data.success) {
							if(desc) {
								$('#description').html(desc.clean());
								$('#description').attr('title','点击修改描述');
							} else {
								$('#description').html('点击添加描述');
								$('#description').attr('title','点击添加描述');
							}
						} else {
							if(data.errmsg) alert(data.errmsg);
							if(!data.logined) location='${pageContext.request.contextPath}/login.html';
						}
					},function(){
						alert('系统发生异常，请稍候再试...');
					});
					$('#info').hide();
					$('#description').show();
				});
				$('#cancleBtn').click(function(){
					$('#info').hide();
					$('#description').show();
				});
				</c:if>
				var toId = location.hash.substring(1);
				if(toId && toId != '${requestScope.photo.id}') {
					location = '${pageContext.request.contextPath}/album/photo/'+toId+'.html';
				}
			});
		})(jQuery);

		function loadPhotoInfo() {
			var photoId = photos[this.current_index].id;
			if(photoId == currentPhotoId) return;
			else currentPhotoId = photoId;
			var postUrl='${pageContext.request.contextPath}/album/viewphoto/'+photoId+'.html';
			doAjax(postUrl,null,function(data){
				if(data.success) {
					var photoInfo = data.photo;
					initPhotoInfo(photoInfo);
				} else {
					if(data.errmsg) alert(data.errmsg);
				}
			},function(){
				alert('系统发生异常，请稍候再试...');
			});
			
			function initPhotoInfo(photoInfo) {
				location.hash=photoInfo.id;
				var desc = photoInfo.description;
				<c:choose>
					<c:when test="${requestScope.photo.ownerId ne pageScope.SESSION_USER.id}">
					if(desc) {
						jQuery('#description').html(desc.clean());
					}
					</c:when>
					<c:otherwise>
						if(desc) {
							jQuery('#description').html(desc.clean());
							jQuery('#desc').html(desc.clean());
							jQuery('#description').attr('title','点击修改描述');
						} else {
							jQuery('#description').html('点击添加描述');
							jQuery('#desc').html('');
							jQuery('#description').attr('title','点击添加描述');
						}
						$('#info').hide();
						$('#description').show();
					</c:otherwise>
				</c:choose>
				if(jQuery('#delUrl')) {
					jQuery('#delUrl').attr('href','javascript:delPhoto('+photoInfo.id+')');
				}
				if(jQuery('#setCoverUrl')) {
					jQuery('#setCoverUrl').attr('href','javascript:setCover('+photoInfo.id+')');
				}
				if(jQuery('#setPorUrl')) {
					jQuery('#setPorUrl').attr('href','javascript:setPortrait('+photoInfo.id+')');
				}
				if(jQuery('#editUrl')) {
					jQuery('#editUrl').attr('href','${pageContext.request.contextPath}/album/editphoto/'+photoInfo.id+'.html');
				}
				//加载评论
				$("#commentWrapper").html();
				var script = AjaxComment.generateAllscript("comment"+photoInfo.id,photoInfo.id, "", "PHOTO", photoInfo.ownerId);
				$("#commentWrapper").html(AjaxComment.generateAllHTML("comment" + photoInfo.id, photoInfo.id,	"", "PHOTO", photoInfo.ownerId));
				// alert(AjaxComment.generateAllscript("feed"+resourceId,resourceId,resourceName,type,ownerId));
				eval(script);
			}
		}
		</script>
		<div id="commentWrapper">
		</div>
	</div> 
</body>
</html>